<template>
  <div class="app-container">
    <!-- 头部表单 -->
    <el-card class="dis">
      <el-form :inline="true" :model="formInline" class="demo-form-inline headForm" size="mini">
        <el-form-item>
          <el-button type="primary">起始</el-button>
          <el-date-picker
            v-model="formInline.task_start"
            type="date"
            style="width:150px"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">截止</el-button>
          <el-date-picker
            v-model="formInline.task_end"
            type="date"
            style="width:150px"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
          />
        </el-form-item>
        <el-form-item style="width:90px">
          <el-select v-model="formInline.task_level" placeholder="所有">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item style="width:90px">
          <el-select v-model="formInline.task_status" placeholder="所有">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item style="width:90px">
          <el-select v-model="formInline.task_type" placeholder="所有">
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="formInline.keyword" style="width:200px" placeholder="关键字:工单编号" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">排序</el-button>
        </el-form-item>
        <el-form-item style="width:90px">
          <el-select v-model="formInline.order" placeholder="所有">
            <el-option
              v-for="item in options5"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item style="width:90px">
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 表格 -->
    <el-card class="mt20">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        size="mini"
        border
        @row-click="handleRowClick"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          prop="work_num"
          label="工单编号"
          align="center"
          width="170"
        />
        <el-table-column
          prop="task_start"
          label="计划开始时间"
          align="center"
          width="150"
        />
        <el-table-column
          prop="total_time"
          label="累计用时"
          align="center"
          width="170"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="task_level"
          label="级别"
          align="center"
          width="90"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.task_level=='一般'">{{ scope.row.task_level }}</el-tag>
            <el-tag v-if="scope.row.task_level=='重要'" type="success">{{ scope.row.task_level }}</el-tag>
            <el-tag v-if="scope.row.task_level=='紧急'" type="danger">{{ scope.row.task_level }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="task_stat"
          label="状态"
          align="center"
          width="145"
        />
        <el-table-column
          prop="user_name"
          label="发起人"
          align="center"
          width="145"
        />
        <el-table-column
          prop="group_user"
          label="执行班组/人"
          align="center"
          width="95"
        />
        <el-table-column
          prop="task_type_string"
          label="类别"
          align="center"
          width="90"
        />
        <el-table-column
          prop="created_at"
          label="生成时间"
          align="center"
          width="145"
        />
        <el-table-column
          label="操作"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <!-- 派单图标 -->
            <i  title="待派单" v-if="scope.row.task_stat=='待派单'" style="font-size: 28px; color: #409EFF" class="el-icon-circle-plus" @click="sends(scope.$index, scope.row)" />
            <!-- <i   title="已派单" v-if="scope.row.task_stat=='已派单'" style="font-size: 28px" class="el-icon-s-promotion" /> -->
            <i  title="待派单" v-if="scope.row.task_stat=='已拒绝'" style="font-size: 28px; color: #409EFF" class="el-icon-circle-plus" @click="sends(scope.$index, scope.row)" />
            <!-- <i  title="已派单" v-if="scope.row.task_stat=='已接受'" style="font-size: 28px" class="el-icon-success" /> -->
            <i   title="待派单"  v-if="scope.row.task_stat=='已超时'" style="font-size: 28px; color: #409EFF" class="el-icon-circle-plus" @click="sends(scope.$index, scope.row)" />
            <!-- <i  title="已派单" v-if="scope.row.task_stat=='已完成'" style="font-size: 28px" class="el-icon-remove" /> -->
            <!-- 接收 -->
             <i  title="待接收" v-if="scope.row.task_stat=='已派单'" style="font-size: 28px;color: #409EFF" class="el-icon-circle-check" @click="accep(scope.row)" />
             <!-- <i  title="已接受"  v-if="scope.row.task_stat=='已接受'" style="font-size: 28px" class="el-icon-circle-check" /> -->
            <!-- 完成 -->
            <i  title="待完成" v-if="scope.row.task_stat=='已接受'" style="font-size: 28px;color: #409EFF" class="el-icon-rank" @click="overs( scope.row)" />
             <!-- <i  title="已完成" v-if="scope.row.task_stat=='已完成'" style="font-size: 28px" class="el-icon-rank" /> -->
            <!-- 确认 -->
            <i  title="待确认" v-if="scope.row.task_stat=='已完成'" style="font-size: 28px;color: #409EFF" class="el-icon-finished" @click="affirm(scope.row)" />
             <i  title="已确认" v-if="scope.row.task_stat=='已确认'" style="font-size: 28px" class="el-icon-finished" />
            <!-- 进度 -->
            <i title="进度" v-if="scope.row.task_stat!=='待派单'&&scope.row.task_stat!=='已超时'&&scope.row.task_stat!=='已拒绝'" style="font-size: 28px; color: #409EFF" class="el-icon-s-operation" @click="pro(scope.$index, scope.row)" />
            <i  title="进度" v-if="scope.row.task_stat=='待派单'||scope.row.task_stat=='已超时'||scope.row.task_stat=='已拒绝'" style="font-size: 28px" class="el-icon-s-operation" />
            <!-- 用车及超时设置 -->
            <i  title="用车" v-if="scope.row.task_stat!=='待派单'" style="font-size: 28px; color: #409EFF" class="el-icon-menu" @click="cars(scope.$index, scope.row)" />
            <i  title="用车" v-if="scope.row.task_stat=='待派单'" style="font-size: 28px" class="el-icon-menu" />
            <!-- 任务详情 -->
            <i  title="详情" style="font-size: 28px; color: #409EFF" class="el-icon-s-marketing" @click="details(scope.$index, scope.row)" />
          </template>
        </el-table-column>
      </el-table>

      <pagination style='float: right;' v-show='totals>0' :total='totals' :page.sync='currentPage' :limit.sync='pageSixe' @pagination='getMaintainList' />
    </el-card>
    <!-- 分页 -->
    <!-- 底部分页 -->
<!--    <div class="currentPage">-->
<!--      <el-pagination-->
<!--        :current-page="currentPage"-->
<!--        :page-sizes="[10, 20, 50, 100]"-->
<!--        :page-size="pageSixe"-->
<!--        layout="total, sizes, prev, pager, next, jumper"-->
<!--        :total="totals"-->
<!--        @size-change="handleSizeChange"-->
<!--        @current-change="handleCurrentChange"-->
<!--        @prev-click="handelPrevChange"-->
<!--        @next-click="handelNextChange"-->
<!--      />-->
<!--    </div>-->
    <!-- 派单 -->
    <el-dialog v-dialogDrag :title="sendTitle" center :visible.sync="dialogTableVisible" width="30%">
      <div slot="title" class="header-title">
        <i class="el-icon-edit" />
        <span class="sendTit">{{ sendTitle }}</span>
      </div>
      <div>
        <Send @resetList="getMaintainList" :group_user="group_user" :lists="lists" :accids="accids" :g_users="g_users" @detailesee="detailrr(arguments)" />
      </div>
    </el-dialog>
    <!-- 进度弹框 -->
    <el-dialog v-dialogDrag :title="proTitle" center :visible.sync="dialogTableVisible2">
      <div slot="title" class="header-title">
        <i class="el-icon-edit" />
        <span class="seeTit">{{ proTitle }}</span>
      </div>
      <div>
        <Progress :pro-dtetail="proDtetail" :num="num" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="dialogTableVisible2 = false">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 用车超时详情 -->
    <el-dialog v-dialogDrag :title="carTitle" center :visible.sync="dialogTableVisible3">
      <div slot="title" class="header-title">
        <i class="el-icon-edit" />
        <span class="seeTit">{{ carTitle }}</span>
      </div>
      <div>
        <Cars :accids="accids" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="dialogTableVisible3= false">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 任务详情 -->
    <el-dialog v-dialogDrag :title="detTitle" center :visible.sync="dialogTableVisible4">
      <div slot="title" class="header-title">
        <i class="el-icon-edit" />
        <span class="seeTit">{{ detTitle }}</span>
      </div>
      <div>
        <Details :det-staus="detStaus" :accids="accids" :details-num="detailsNum" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="dialogTableVisible4= false">关闭</el-button>
      </span>
    </el-dialog>

     <!-- 完成工单 -->
    <div v-if="overFlag">
      <over
        :id="overId"
        :dialog-visible="overFlag"
        title="工单任务"
        @close="overclose"
        @confirm="overConfirm"
      />
    </div>




    <!-- 接收或者拒绝 -->
    <el-dialog

  title="工单任务"
  :visible.sync="accepDrag"
  width="30%"
 >
  <el-form   :model="ruleForm1" label-width="100px" class=" demo-ruleForm">
        <el-form-item label="请选择" prop="task_status">
    <el-radio-group v-model="ruleForm1.task_status">
      <el-radio label="2">接受</el-radio>
      <el-radio label="6">拒绝</el-radio>
    </el-radio-group>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="accepDrag = false">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </span>
</el-dialog>
<!-- 确认工单 -->
 <el-dialog
  title="工单任务"
  :visible.sync="confirmDrag"
  width="30%"
 >
  <el-form :model="ruleForm2" :rules="rules" ref="ruleForm2" label-width="100px" class="dia1 demo-ruleForm">
       <el-form-item class="zcItem" label="请输入工单结果" prop="task_result">
    <el-input v-model="ruleForm2.task_result"  placeholder="如：正常，异常"></el-input>
    <span class="zc">如出现非正常情况，请输入异常或其他</span>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="confirmDrag = false">取 消</el-button>
    <el-button type="primary" @click="submit2('ruleForm2')">确 定</el-button>
  </span>
</el-dialog>
<!-- 完成工单 -->
<el-dialog
  title="工单任务"
  :visible.sync="overDrag"
  width="30%"
 >
  <span>确定完成此工单？</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="overDrag = false">取 消</el-button>
    <el-button type="primary" @click="submit3">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import { orderList, groupList, workerAllList, progre, useCars,workerdrevers,confirms,acceps } from '@/api/order'
import Send from './components/send.vue'
import over from './components/over.vue'

import Progress from './components/progress.vue'
import Cars from './components/cars.vue'
import Details from './components/details.vue'

export default {
  name: 'index',
  components: {
    Send,
    Progress,
    Cars,
    Details,
    over
  },
  data() {
    return {
      overFlag:false,  //完成工单
      overId:'',  
      ruleForm1:{
        id:'',
        task_status:'2'
      },
      ruleForm2:{
        id:'',
        task_result:'正常',
        task_status:'4'

      },
        rules: {
          task_result: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 2,  message: '长度最少两个字符', trigger: 'blur' }
          ],},
          confirmDrag:false,
          overDrag:false,
      formInline: {
        offset: '',
        limit: '',
        task_start: '',
        task_end: '',
        task_level: '',
        task_stat: '',
        task_type: '',
        keyword: '',
        order: ''
      },
      options1: [{
        value: '',
        label: '所有'
      }, {
        value: '一般',
        label: '一般'
      }, {
        value: '重要',
        label: '重要'
      }, {
        value: '紧急',
        label: '紧急'
      }],
      options2: [{
        value: '',
        label: '所有'
      }, {
        value: '0',
        label: '待派单'
      }, {
        value: '1',
        label: '已派单'
      }, {
        value: '2',
        label: '已接受'
      },
      {
        value: '6',
        label: '已拒绝'
      }, {
        value: '5',
        label: '已超时'
      },
      {
        value: '3',
        label: '已完成'
      }],
      options3: [{
        value: '',
        label: '所有'
      }, {
        value: '1',
        label: '巡检'
      }, {
        value: '2',
        label: '试验'
      }, {
        value: '3',
        label: '报修'
      }, {
        value: '4',
        label: '抢修'
      }],
      options5: [{
        value: '1',
        label: '降序'
      }, {
        value: '2',
        label: '升序'
      }],
      tableData: [],
      multipleSelection: [], // 列表选中的数据
      currentPage: 1,
      pageSixe: 10,
      totals: 0,
      sendTitle: '派单',
      dialogTableVisible: false, // 派单
      lists: '', // 传给子组件的单行数据
      pickerOptions: { // 日期选择只能选今天之前的日期
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      group_user: '', // 班组列表
      g_users: '', // 运维人员列表
      proTitle: '工单进度',
      dialogTableVisible2: false, // 进度
      proDtetail: '',
      num: '',
      carTitle: '用车及超时设置详情',
      dialogTableVisible3: false, // 用车超时
      detTitle: '任务详情',
      dialogTableVisible4: false, // 任务详情
      rowDetail: '',
      detailsNum: '', // 详情组件里，区分抢修报修与巡检试验
      accids: '', // 传给子组件id
      detStaus: '', // 传给子组件状态值
      taskNum: '',
      accepDrag:false,
      overForm:{}

    }
  },

  mounted() {
    this.getdatatime()
    this.getSevent()
  },
  created() {
    this.formInline.task_level = this.options1[0].value
    this.formInline.task_status = this.options2[0].value
    this.formInline.task_type = this.options3[0].value
    this.formInline.order = this.options5[0].label
    this.getMaintainList()
  },
  methods: {
    time(date) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      var h = date.getHours()
      h = h < 10 ? '0' + h : h
      var minute = date.getMinutes()
      minute = minute < 10 ? '0' + minute : minute
      var second = date.getSeconds()
      second = second < 10 ? '0' + second : second
      return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
    },
    // 默认显示今天
    getdatatime() {
      this.formInline.task_end = this.time(new Date())
      console.log(this.formInline.task_end)
    },
    // 默认一周前
    getSevent() {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      this.formInline.task_start = this.time(date)
    },
    addSupTitle(e){
      console.log('e',e)
      const target = e.target

        // target.title = tit

    },
    // 获取工单列表
    getMaintainList() {
      console.log(7777777)
      console.log(this.formInline)
      this.formInline.offset = this.currentPage
      this.formInline.limit = this.pageSixe
      const arr = this.formInline
      arr.task_level = ''
      arr.task_status = ''
      arr.task_type = ''
      arr.order = ''
      console.log(this.formInline)
      orderList(arr).then(res => {
        if (res.code === 200) {
          const arr = res.data.list
          arr.forEach(item => {
            if (item.task_status == 0) {
              item.task_stat = '待派单'
            }
            if (item.task_status == 1) {
              item.task_stat = '已派单'
            }
            if (item.task_status == 2) {
              item.task_stat = '已接受'
            }
            if (item.task_status == 6) {
              item.task_stat = '已拒绝'
            }
            if (item.task_status == 5) {
              item.task_stat = '已超时'
            }
            if (item.task_status == 3) {
              item.task_stat = '已完成'
            }
            if (item.task_status == 4) {
              item.task_stat = '已确认'
            }
          })
          this.tableData = arr
          this.totals = res.data.total
        }
      })
    },
    // 搜索
    search() {
      this.formInline.offset = this.currentPage
      this.formInline.limit = this.pageSixe
      console.log(this.formInline)
      orderList(this.formInline).then(res => {
        if (res.code === 200) {
          const arr = res.data.list
          arr.forEach(item => {
            if (item.task_status == 0) {
              item.task_stat = '待派单'
            }
            if (item.task_status == 1) {
              item.task_stat = '已派单'
            }
            if (item.task_status == 2) {
              item.task_stat = '已接受'
            }
            if (item.task_status == 3) {
              item.task_stat = '已拒绝'
            }
            if (item.task_status == 4) {
              item.task_stat = '已超时'
            }
            if (item.task_status == 5) {
              item.task_stat = '已完成'
            }
          })
          this.tableData = arr
          this.totals = res.data.total
        }
      })
    },

    // 获取班组列表
    getGroup() {
      groupList({ offset: 0, limit: 1, pageType: 'all' }).then(res => {
        // this.group_user = res.data.groups
        const arr = res.data.groups
        arr.forEach(item => {
          item.longName = item.group_name + '(负责人：' + item.group_admin + ')' + '(' + item.status_name + ')'
        })
        this.group_user = arr
      })
    },
    // 获取运维人员列表
    getGroups() {
      workerdrevers({ guard_name: '', limit: 10, offset: 1, order: 'ascending', sort: 'created_at' }).then(res => {
        // this.group_user = res.data.groups
        const arr = res.data.admins
        arr.forEach(item => {
          item.longName = item.name + '(' + item.on_status + ')'
        })
        this.g_users = arr
      })
    },
    // 表单选中
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 点击行触发，选中或不选中复选框
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    // 派单
    sends(a, b) {
      this.dialogTableVisible = true
      this.lists = b
      this.accids = b.id
      this.getGroup()
      this.getGroups()
    },
    // 接受
    accep(a){
      this.accepDrag=true
      this.ruleForm1.id=a.id
    },
    submit(){
       acceps(this.ruleForm1).then(res=>{
        if(res.code==200){
          this.accepDrag=false
          this.getMaintainList()
        }
      })

    },
    // 完成
    overs(a){
      this.overFlag=true
      this.overId=a.work_num
      this.overForm.task_status=3
      this.overForm.id=a.id

 

   },
   overclose(){
     this.overFlag=false
   },
   overConfirm(){
      acceps( this.overForm).then(res=>{
        if(res.code==200){
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.getMaintainList()
          // this.overDrag=false
        }
      })
   },
   submit3(){
     
   },
    // 确认
    affirm(a){
      this.confirmDrag=true
      this.ruleForm2.id=a.id

      //  this.$confirm('确认修改工单状态？', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }).then(() => {
      //      confirms({task_status:4,id:a.id}).then(res=>{
      //   if(res.code==200){
      //     this.$message({
      //       type: 'success',
      //       message: '操作成功!'
      //     });
      //     this.getMaintainList()
      //   }
      // })


      //   }).catch(() => {
      //     this.$message({
      //       type: 'info',
      //       message: '已取消操作'
      //     });
      //   });

    },
     submit2(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
             confirms(this.ruleForm2).then(res=>{
              if(res.code==200){
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.confirmDrag=false
          this.getMaintainList()
        }
             })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    detailrr(arg) {
      this.dialogTableVisible = arg[0]
      if (arg[1] == 1) {
        this.getMaintainList()
      }
    },
    // 进度
    pro(a, b) {
      this.dialogTableVisible2 = true
      const data = {
        task_num: b.task_num
      }
      progre(data).then(res => {
        this.proDtetail = res.data.list
        const nums = this.proDtetail[this.proDtetail.length - 1].task_status
        if (nums == 1) {
          const arr1 = [
            {
              status_name: '已派单',
              created_at: ''
            },
            {
              status_name: '已接受',
              created_at: ''
            },
            {
              status_name: '已完成',
              created_at: ''
            },
            {
              status_name: '已确认',
              created_at: ''
            }
          ]
          this.proDtetail = arr1
          this.num = 1
        }

        if (nums == 2) {
          this.num = this.proDtetail.length
          const arr2 = [
            {
              status_name: '已完成',
              created_at: ''
            },
            {
              status_name: '已确认',
              created_at: ''
            }
          ]
          this.proDtetail = this.proDtetail.concat(arr2)
        }
        if (nums == 3) {
          this.num = this.proDtetail.length
          const arr3 = [
            {
              status_name: '已确认',
              created_at: ''
            }
          ]
          this.proDtetail = this.proDtetail.concat(arr3)
        }
        if (nums == 4) {
          this.num = this.proDtetail.length
        }
      }
      )
    },
    // 用车超时
    cars(a, b) {
      this.dialogTableVisible3 = true
      console.log('用车是否超时',b.id)
     this.accids = b.id
    },
    // 任务详情
    details(a, b) {

      this.accids = b.work_num
      this.detStaus = b.task_type_string
      if (b.task_type == '抢修' || b.task_type == '报修') {
        this.detailsNum = 1
      } else {
        this.detailsNum = 2
      }
      this.dialogTableVisible4 = true
      // useCars({ id: b.id }).then(res => {
      //   this.rowDetail = res.data
      //   console.log(res)
      // })
    },
    handleSizeChange(val) {
      this.pageSixe = val
      this.getMaintainList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getMaintainList()
    },
    handelPrevChange(val) {
      this.currentPage = val
      this.getMaintainList()
    },
    handelNextChange(val) {
      this.currentPage = val
      this.getMaintainList()
    }
  }
}
</script>

<style lang="scss" scoped>
  .btn{
    position: relative;
    // top:-2px;
    left: 1px;
  }
  .formHeight {
  height: 40px;
}
// .headForm{
//   ::v-deep .el-button--mini{
//     height: 2rem!important;
//         position: relative;
//     top: -1px;
//   }
// }
::v-deep.el-icon-s-promotion,::v-deep.el-icon-circle-check,::v-deep.el-icon-s-operation,::v-deep.el-icon-menu,::v-deep.el-icon-s-marketing,::v-deep.el-icon-finished,::v-deep.el-icon-rank{
  cursor: pointer;
}
.main-container{
  transition:margin-left 0;
}
  .cons{
    text-align: left;
    padding-left: 10px;
  }
   .currentPage{
    // display: flex;
    position: fixed;
    bottom: 0;
    right: 0;
    // flex-direction: row-reverse;
    // margin-top: 20px;
  }
  ::v-deep.el-form-item{
    margin-right: 0;
  }
    .header-title{
    .seeTit{
      padding-left: 10px;
    }
  }
  ::v-deep.el-dialog__header{
    background-color: #263445;
    color: #fff;
  }
  .dialog-footer{
        text-align: right;

  }
  ::v-deep.el-dialog__footer{
    text-align: right;
  }
  .i1{
    color:rgb(119, 117, 117);
  }
  .dia1{
   ::v-deep.el-form-item__label{
     width: 120px!important;
   }
   ::v-deep.el-input{
     width: 80%;
   }

  }
  .zcItem{
    ::v-deep.el-form-item__content{
      position: relative;
      .zc{
        position: absolute;
        top:30px;
        left: 20px;
        font-size: 12px;
        color: red;
      }
    }
  }
</style>
